<template>
  <Row :gutter="16">
    <Col :span="20">
      <h2 id="Anchor">Anchor 锚点</h2>
      <example-code>
        <template v-slot:demo>
          <Divider orientation="left" id="AnchorBase">基本用法</Divider>
          <p>用于跳转到页面指定位置。</p>
          <p>iView 的 &lt;Affix&gt;组件不支持`container`的相对容器固定。于是自己动手在原组件基础上稍作改动，做了个新的&lt;cAffix&gt;</p>
        </template>
        <template v-slot:code>{{ code.anchor.affix }}</template>
      </example-code>
      <h2 id="Drawer">Drawer 抽屉</h2>
      <example-code id="Drawerbase">
        <template v-slot:demo>
          <Button @click="drawerLeft = true" type="primary">OPEN PROFILE</Button>
          <Divider orientation="left">一般抽屉用法</Divider>
          <p>普通抽屉用法，可以作为内容预览，类似 modal</p>
          <p>可直接只用组件，绑定数据</p>
          <Drawer width="480" title="左边的抽屉 Drawer" placement="left" :closable="false" v-model="drawerLeft">
            <i-code bg lang="html" :max-height="200">{{ code.drawer.left }}</i-code>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <Alert>
              An info prompt
              <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
            </Alert>
            <Alert type="success">
              A success prompt
              <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
            </Alert>
            <Alert type="warning">
              A warning prompt
              <template slot="desc">
                Content of prompt. Content of prompt. Content of prompt.
              </template>
            </Alert>
            <Alert type="error">
              An error prompt
              <span slot="desc">
                Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
            </span>
            </Alert>
          </Drawer>
        </template>
        <template v-slot:code>{{ code.drawer.left }}</template>
      </example-code>
      <example-code id="Drawernested">
        <template v-slot:demo>
          <Button @click="value3 = true" type="primary">OPEN NESTED</Button>
          <Divider orientation="left">嵌套抽屉用法</Divider>
          <p>抽屉可以嵌套，内容不需要有嵌套关系</p>
          <p>可以类似于 modal 打开表单完成一些编辑和设置动作</p>
          <Drawer
            title="Create"
            v-model="value3"
            width="720"
            :mask-closable="false"
            :styles="styles"
            draggable
          >
            <Form :model="formData" label-position="top">
              <Divider orientation="left">Profile</Divider>
              <Row :gutter="32">
                <Col span="12">
                  <Row>
                    <Col span="11">
                      <FormItem label="First Name">
                        <Input prefix="ios-contact" v-model="formData.firstName" placeholder="First Name" />
                      </FormItem>
                    </Col>
                    <Col span="2" style="text-align: center">&nbsp;</Col>
                    <Col span="11">
                      <FormItem label="Last Name">
                        <Input prefix="ios-contact" v-model="formData.lastName" placeholder="Last Name" />
                      </FormItem>
                    </Col>
                  </Row>
                </Col>
                <Col span="12">
                  <FormItem label="Account">
                    <Input v-model="formData.account" placeholder="Your Account"></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row :gutter="32">
                <Col span="12">
                  <FormItem label="Birthday">
                    <DatePicker type="date" style="display: block" placeholder="Select date" v-model="formData.birthday" />
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="Country & City">
                    <Cascader :data="cities" @on-change="selecteCities"></Cascader>
                  </FormItem>
                </Col>
              </Row>
              <Divider orientation="left">Contact</Divider>
              <Row :gutter="32">
                <Col span="12">
                  <FormItem label="Email">
                    <Input type="email" v-model="formData.email" placeholder="Email" />
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="Phone Number">
                    <Input v-model="formData.phone" placeholder="Phone" />
                  </FormItem>
                </Col>
              </Row>
              <Row :gutter="32">
                <Col span="12">
                  <FormItem label="Website">
                    <Input  v-model="formData.website" placeholder="Website">
                      <span slot="prepend">https://</span>
                    </Input>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="Github">
                    <Input v-model="formData.github" placeholder="Github" >
                      <span slot="prepend">https://github.com/</span>
                    </Input>
                  </FormItem>
                </Col>
              </Row>
              <Divider orientation="left">Abilities</Divider>
              <Row :gutter="32">
                <Col span="12">
                  <FormItem label="Department">
                    <Input v-model="formData.department" placeholder="Department" />
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="Position">
                    <Input v-model="formData.position" placeholder="Position" />
                  </FormItem>
                </Col>
              </Row>
              <FormItem label="Responsibilities">
                <Input v-model="formData.responsibilities" placeholder="Responsibilities" />
              </FormItem>
              <FormItem label="Skills">
                <Input type="textarea" v-model="formData.skills" :rows="4" placeholder="please describe your skills" />
              </FormItem>
            </Form>
            <div class="demo-drawer-footer">
              <Button style="margin-right: 8px" @click="value3 = false">Cancel</Button>
              <Button type="primary" @click="showDrawerForm">Submit</Button>
            </div>
          </Drawer>
          <Drawer
            title="Profile"
            v-model="value4"
            :mask-closable="false"
            width="640"
            :styles="styles">
            <component :is="nestedDrawerContent.name" v-bind="nestedDrawerContent.props">{{ nestedDrawerContent.slot }}</component>
          </Drawer>
        </template>
        <template v-slot:code>{{ code.drawer.nested }}</template>
      </example-code>
      <h2 id="Carousel">Carousel 跑马灯</h2>
      <example-code>
        <template v-slot:demo>
          <Carousel autoplay loop>
            <CarouselItem>
              <div class="demo-carousel">1</div>
            </CarouselItem>
            <CarouselItem>
              <div class="demo-carousel">2</div>
            </CarouselItem>
            <CarouselItem>
              <div class="demo-carousel">3</div>
            </CarouselItem>
            <CarouselItem>
              <div class="demo-carousel">4</div>
            </CarouselItem>
          </Carousel>
          <Divider orientation="left">图标，颜色，未完成状态</Divider>
          <p>通过添加 <code>autoplay</code> 属性来标记最后一个为幽灵节点，标识还未完成。</p>
          <p>通过添加 <code>loop</code> 属性来标记最后一个为幽灵节点，标识还未完成。</p>
        </template>
        <template v-slot:code>{{ code.carousel.loop }}</template>
      </example-code>
      <h2 id="Timeline">Timeline 时间轴</h2>
      <example-code>
        <template v-slot:demo>
          <Timeline pending>
            <TimelineItem color="green">
              <Icon type="ios-trophy" slot="dot"></Icon>
              <span>发布里程碑版本</span>
            </TimelineItem>
            <TimelineItem color="green">
              <Icon type="md-color-palette" slot="dot" />
              <span>发布2.0版本</span>
            </TimelineItem>
            <TimelineItem color="red">
              <Icon type="md-warning" slot="dot" />
              <span>严重故障</span>
            </TimelineItem>
            <TimelineItem color="blue">发布3.0版本</TimelineItem>
            <TimelineItem><a href="#">3.1 开发中...</a></TimelineItem>
          </Timeline>
          <Divider orientation="left">图标，颜色，未完成状态</Divider>
          <p>通过添加 <code>pending</code> 属性来标记最后一个为幽灵节点，标识还未完成。</p>
        </template>
        <template v-slot:code>{{ code.timeline.release }}</template>
      </example-code>
      <example-code>
        <template v-slot:demo>
          <Timeline>
            <TimelineItem>
              <p class="timeline-time">1976年</p>
              <p class="timeline-content">Apple I 问世</p>
            </TimelineItem>
            <TimelineItem>
              <p class="timeline-time">1984年</p>
              <p class="timeline-content">发布 Macintosh</p>
            </TimelineItem>
            <TimelineItem>
              <p class="timeline-time">2007年</p>
              <p class="timeline-content">发布 iPhone</p>
            </TimelineItem>
            <TimelineItem>
              <p class="timeline-time">2010年</p>
              <p class="timeline-content">发布 iPad</p>
            </TimelineItem>
            <TimelineItem>
              <p class="timeline-time">2011年10月5日</p>
              <p class="timeline-content">史蒂夫·乔布斯去世</p>
            </TimelineItem>
          </Timeline>
          <Divider orientation="left">基本用法 文本段落</Divider>
        </template>
        <template v-slot:code>{{ code.timeline.base }}</template>
      </example-code>
      <h2 id="Form">Form 表单</h2>
      <example-code>
        <Form
          slot="demo"
          label-position="left"
          :label-width="120"
          ref="formDemo"
          :model="formDemoData"
          :rules="formDemoRule">
          <FormItem label="User Name" prop="name">
            <Input
              type="text"
              v-model="formDemoData.name"
              placeholder="USER NAME">
            </Input>
          </FormItem>
          <FormItem label="Age" prop="age">
            <Input
              type="number"
              v-model="formDemoData.age"
              placeholder="0"
              step="1" >
            </Input>
          </FormItem>
          <FormItem label="Birth" prop="birth">
            <DatePicker
              type="date"
              placeholder="2000-01-01"
              v-model="formDemoData.birth" >
            </DatePicker>
          </FormItem>
          <FormItem label="Education" prop="education">
            <Select v-model="formDemoData.education">
              <Option value="Bachelor">Bachelor</Option>
              <Option value="Master">Master</Option>
              <Option value="Doctor">Doctor</Option>
            </Select>
          </FormItem>
          <FormItem label="Sex" prop="sex">
            <RadioGroup v-model="formDemoData.sex">
              <Radio label="male">
                <Icon type="md-male"></Icon>
                <span>Male</span>
              </Radio>
              <Radio label="female">
                <Icon type="md-female"></Icon>
                <span>Female</span>
              </Radio>
              <Radio label="other">
                <Icon type="md-help"></Icon>
                <span>Unknown</span>
              </Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="Lang & Projects" prop="projects">
            <Cascader :data="projects" v-model="formDemoData.project"></Cascader>
          </FormItem>
          <FormItem label="Married" prop="married">
            <i-switch v-model="formDemoData.married" size="large" >
              <span slot="open">已婚</span>
              <span slot="close">未婚</span>
            </i-switch>
          </FormItem>
          <FormItem label="Wives" prop="wives">
            <CheckboxGroup v-model="formDemoData.wives">
              <Checkbox v-for="wife in wives" :label="wife.name" :key="wife.name">
                <Icon :type="wife.icon"></Icon>
                <span>{{ wife.name }}</span>
              </Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="Think" prop="think">
            <AutoComplete
              v-model="formDemoData.think"
              :data="thinkOption"
              @on-search="autoThink"
              :filter-method="filterMethod"
              icon="ios-thunderstorm">
            </AutoComplete>
          </FormItem>
          <FormItem label="Proficiency" prop="proficiency">
            <Slider
              range
              :max="10"
              :min="0"
              v-model="formDemoData.proficiency"
              :marks="marks"
              :tip-format="sliderFormat"></Slider>
          </FormItem>
          <FormItem label="Rating" prop="rating">
            <Rate
              v-model="formDemoData.rating"
              allow-half
              icon="ios-heart"
              show-text
              :count="6"
            ></Rate>
          </FormItem>
          <FormItem label="Avatar">
            <Upload
              action="http://test.th6188.com/test/upload"
              type="drag"
              :headers="uploadHeaders"
              :on-success="uploadSuccess"
            >
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" :size="52" color="#3399ff"></Icon>
                <p>Click or Drag files here to upload</p>
              </div>
<!--              <Button icon="ios-cloud-upload-outline">Upload Files</Button>-->
            </Upload>
          </FormItem>
          <FormItem label="BgColor" prop="bgColor">
            <ColorPicker v-model="formDemoData.bgColor" recommend></ColorPicker>
          </FormItem>
          <FormItem label="Intro" prop="intro">
            <Input
              v-model="formDemoData.intro"
              type="textarea"
              :rows="3"
              clearable
              :maxlength="140"
            ></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formDemo')">Submit</Button>
            <Button @click="handleReset('formDemo')" style="margin-left: 8px">Reset</Button>
          </FormItem>
        </Form>
        <template v-slot:code>{{ code.form.all }}</template>
      </example-code>
    </Col>
    <Col :span="4">
      <cAnchor :offset-top="105" show-ink container=".content-wrapper">
        <AnchorLink href="#Anchor" title="Anchor 锚点"></AnchorLink>
        <AnchorLink href="#Drawer" title="Drawer 抽屉">
          <AnchorLink href="#Drawerbase" title="一般展示"></AnchorLink>
          <AnchorLink href="#Drawernested" title="嵌套使用"></AnchorLink>
        </AnchorLink>
        <AnchorLink href="#Carousel" title="Carousel 跑马灯"></AnchorLink>
        <AnchorLink href="#Timeline" title="Timeline 时间轴"></AnchorLink>
        <AnchorLink href="#Form" title="Form 表单"></AnchorLink>
      </cAnchor>
    </Col>
  </Row>
</template>

<script>
import axios from 'axios'
import Profile from '_c/dapianzi/profile'
import ExampleCode from '_c/dapianzi/code-example'
import Code from '_c/code'
import anchorCode from '@/code/anchor'
import drawerCode from '@/code/drawer'
import carouselCode from '@/code/carousel'
import timelineCode from '@/code/timeline'
import formCode from '@/code/form'
export default {
  name: 'test2',
  components: {
    'i-code': Code,
    'example-code': ExampleCode,
    'Profile': Profile
  },
  data: () => {
    return {
      // drawer form
      value3: false,
      value4: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        firstName: '',
        lastName: '',
        account: '',
        birthday: '',
        country: '',
        city: '',
        website: '',
        github: '',
        phone: '',
        email: '',
        position: '',
        department: '',
        responsibilities: '',
        skills: 'C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.'
      },
      nestedDrawerContent: {
        name: 'div',
        props: null,
        slot: ''
      },
      cities: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        }, {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙'
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园'
                },
                {
                  value: 'shizilin',
                  label: '狮子林'
                }
              ]
            }
          ]
        }
      ],
      projects: [
        {
          value: 'javascript',
          label: 'Javascript',
          children: [
            {
              label: 'Nodejs',
              value: 'nodejs',
              children: [
                {
                  label: 'Nuxt',
                  value: 'nuxt'
                },
                {
                  label: 'CoServer',
                  value: 'coserver'
                }
              ]
            },
            {
              label: 'Browser',
              value: 'Browser',
              children: [
                {
                  label: 'Vue',
                  value: 'Vue'
                },
                {
                  label: 'React Native',
                  value: 'react_native'
                },
                {
                  label: 'Cocos Creator',
                  value: 'cocos'
                },
                {
                  label: 'TensorFlow JS',
                  value: 'tensorflow'
                }
              ]
            }
          ]
        }, {
          value: 'python',
          label: 'Python',
          children: [
            {
              value: 'tensorflow',
              label: 'TensorFlow'
            }
          ]
        }, {
          value: 'php',
          label: 'PHP',
          children: [
            {
              value: 'swoole',
              label: 'Swoole Server'
            },
            {
              value: 'laravel',
              label: 'Laraval Framework'
            }
          ]
        }, {
          value: 'c++',
          label: 'C++',
          children: [
            {
              value: 'tensorflow',
              label: 'TensorFlow'
            }
          ]
        }
      ],
      code: {
        anchor: anchorCode,
        drawer: drawerCode,
        carousel: carouselCode,
        timeline: timelineCode,
        form: formCode
      },
      drawerLeft: false,
      formDemoData: {
        name: 'Dapianzi Carl',
        age: 31,
        sex: 'female',
        birth: '1989-07-29',
        project: ['javascript', 'nodejs', 'nuxt'],
        education: 'Master',
        married: true,
        wives: ['Valerie', 'Snow', 'Nancy'],
        intro: 'Love movies, games, mathematics, physics, astronomy',
        proficiency: [3, 6],
        rating: 4.5,
        think: '',
        avatar: '',
        bgColor: '#FFBA00'
      },
      formDemoRule: {
        name: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('Please enter your name'))
              } else {
                if (value.length > 12) {
                  callback(new Error('Your byc is too long'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          },
          {
            asyncValidator: (rule, value) => {
              return new Promise((resolve, reject) => {
                axios.get('/test/mock?action=validate&value=' + value).then(function (res) {
                  let response = res.data
                  if (response.code) {
                    reject(new Error(response.msg))
                  } else {
                    resolve(response.data)
                  }
                }).catch((errors) => {
                  reject(errors, 'name')
                })
              })
            },
            trigger: 'blur'
          }
        ],
        age: [
          {
            validator: (rule, value, cb) => {
              if (isNaN(value)) {
                cb(new Error('Age must be a number!!!'))
              } else if (value > 30) {
                cb(new Error('too old!'))
              } else if (value < 18) {
                cb(new Error('R18 sensitive!!'))
              } else {
                cb()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      wives: [
        { name: 'Valerie', icon: 'logo-vimeo' },
        { name: 'Snow', icon: 'ios-snow' },
        { name: 'Carrie', icon: 'md-cloud' },
        { name: 'Nancy', icon: 'md-game-controller-b' }
      ],
      thinkOption: [],
      marks: {
        0: 'A cup',
        3: 'D cup',
        6: 'G cup',
        8: 'I cup'
      },
      uploadHeaders: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST'
      }
    }
  },
  computed: {

  },
  methods: {
    showDrawerForm () {
      // this.$Modal.confirm({
      //   title: 'Profile',
      //   fullscreen: true,
      //   render: (h) => {
      //     return h(Profile, {
      //       props: this.formData
      //     })
      //   }
      // })
      this.nestedDrawerContent = {
        name: 'Profile',
        props: this.formData,
        slot: ''
      }
      this.value4 = true
    },
    switchNestedDrawerContent (name) {
      switch (name) {
        case 'bgColor': {
          this.nestedDrawerContent = {
            name: 'i-color',
            props: 'i-color',
            slot: 'i-color'
          }
        }
      }
    },
    selecteCities (value, data) {
      [this.formData.country, this.formData.city] = value
    },
    inputEvents (event) {
      this.$Notice.info({ title: `[${event.type}] Triggered` })
    },
    filterMethod (value, option) {
      return option.name.indexOf(value) >= 0
    },
    autoThink (value) {
      this.thinkOption = !value ? [] : [
        { name: value },
        { name: value + value },
        { name: value + value + value }
      ]
    },
    sliderFormat (val) {
      return String.fromCharCode(65 + parseInt(val)) + ' Cup'
    },
    uploadSuccess (res, file, fileList) {
      console.log(res)
      if (res.code === 0) {
        this.$Notice.success({ title: res.data.src })
      } else {
        this.$Norice.error(res.msg)
      }
    },
    handleSubmit (name) {
      // syncvalidate 使用规则
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('ok')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  },
  mounted () {
    // this.$axios.get('http://test.th6188.com/test/mock').then((res) => {
    //   console.log(res.data)
    // }).catch((error) => {
    //   console.log(error)
    // })
  }
}
</script>

<style>

  .demo-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }

  .demo-carousel{
    width: 100%;
    height: 200px;
    font-size: 48px;
    line-height: 200px;
    text-align: center;
    color: #FFFFFF;
    background: #506B9E;
  }
  .timeline-time{
    font-size: 14px;
    font-weight: bold;
  }
  .timeline-content{
    padding-left: 5px;
  }
</style>
